<template>
  <div class="fillcontain">
    <bt-col-header title="新增公式因子"></bt-col-header>
    <div class="page-content">
      <div class="head-title">
        <i class="el-icon-vwedit">   {{this.$route.name}}</i>
      </div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
        <div class="form-container">
          <div class="row">
            <el-form-item label="公式因子类型" prop="formulaType" class="col-md-6">
              <el-select style="width: 300px" v-model="dataForm.formulaType" filterable clearable placeholder="请选择">
                <el-option v-for="item in formulaType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="上级公式因子" class="col-md-6">
                <el-popover ref="menuListPopover" v-model="visible" placement="bottom-start" width="300" trigger="click">
                  <el-tree :data="dataList" :props="menuListTreeProps" node-key="formulaCode" ref="menuListTree" @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false">
                  </el-tree>
                </el-popover>
                <el-input v-model="dataForm.parentName" style="width: 300px" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级公式因子" class="menu-list__input"></el-input>
              </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="公式因子代码" prop="formulaCode" class="col-md-6">
              <el-input style="width: 300px" :disabled="codedisabled" v-model="dataForm.formulaCode" placeholder="公式因子代码" clearable></el-input>
            </el-form-item>
            <el-form-item label="公式因子名称" prop="formulaName" class="col-md-6">
              <el-input style="width: 300px" v-model="dataForm.formulaName" placeholder="公式因子名称" clearable></el-input>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="关联模型" prop="entityId" class="col-md-6">
              <el-select style="width: 300px" v-model="dataForm.entityId" filterable placeholder="请选择">
                <el-option v-for="item in entitys" :key="item.entityId" :label="item.label" :value="item.entityId" @click.native.prevent="changeEntity(item)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="quality.length" label="模型属性" prop="qualityId" class="col-md-6">
              <el-select style="width: 300px" v-model="dataForm.qualityId" filterable placeholder="请选择">
                <el-option v-for="item in quality" :key="item.qualityId" :label="item.itemName" :value="item.qualityId" @click.native.prevent="changequality(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="是否有效" class="col-md-6">
              <el-switch v-model="dataForm.isEffect" active-color="#13ce66" inactive-color="#ff4949" on-value="1" on-text="是" off-text="否" off-value="0">
              </el-switch>
            </el-form-item>
          </div>
          <div class="row">
            <el-form-item label="描述" class="col-md-12">
              <el-input type="textarea" readonly :rows="4" v-model="dataForm.remark" placeholder="方法描述"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="content-footer form-padding" >
        <el-button :plain="true" type="info" @click="dataFormSubmit()">确定</el-button>
        <el-button @click="toList">取消</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import {
  formulaList,
  editFormula,
  deleteFormula,
  getQualty,
} from "@/api/baseConfig/conditionDivisor";
import { entityList } from "@/api/baseConfig/entity";
import constant from "@/api/constant";
import { formulaTranslate } from "@/utils";

export default {
  data() {
    return {
      codedisabled: false,
      descData: [],
      dataList: [],
      entitys: [],
      quality: [],
      formulaType: constant.ruleConfig.formulaType,
      dataForm: {
        formulaType: "",
        parentCode: 0,
        parentName: "",
        formulaCode: "",
        formulaName: "",
        entityId: "",
        isEffect: "1",
        qualityId: "",
        remark: "",
        formulaId: null,
      },
      dataRule: {
        formulaType: [
          { required: true, message: "请选择公式因子类型", trigger: "change" },
        ],
        // parentName: [
        //   { required: true, message: "请选择上级公式因子", trigger: "change" },
        // ],
        formulaCode: [
          {
            required: true,
            message: "公式因子代码不能为空",
            trigger: "change",
          },
        ],
        formulaName: [
          {
            required: true,
            message: "公式因子名称不能为空",
            trigger: "change",
          },
        ],
        entityId: [
          { required: true, message: "请选择关联模型" },
        ],
        // remark: [
        //   { required: true, message: "描述不能为空", trigger: "change" },
        // ],
      },
      visible: false,
      menuListTreeProps: {
        label: "formulaName",
        children: "children",
      },
    };
  },
  created() {
    // 编辑
      this.getEntityCls();
    if (this.$route.query.row) {
      this.codedisabled = true;
      let row = JSON.parse(this.$route.query.row);
      let param = {
        id:row.entityId + ''
      }
      if(row.qualityId == undefined) {
        row.qualityId = ''
      }
      this.getQualtydata(param)
        this.dataForm = {
          formulaType: row.formulaType,
          parentCode: row.parentCode,
          parentName: row.parentName,
          formulaCode: row.formulaCode,
          formulaName: row.formulaName,
          entityId: row.entityId,
          isEffect: row.isEffect,
          qualityId: `${row.qualityId}`,
          remark: row.remark,
          formulaId: row.formulaId,
        };
    } else {
      // 新增
      let param = {
        formulaCode: this.dataForm.formulaCode,
        formulaType: this.dataForm.formulaType,
        formulaName: this.dataForm.formulaName,
      };
      this.getDataList(param);
    }
    // this.init(id)
  },
  watch: {
    "dataForm.formulaType": {
      handler(newName, oldName) {
        let param = {
          formulaCode: "",
          formulaType: newName,
          formulaName: "",
        };
        this.getDataList(param);
      },
      deep: true,
      // immediate: true,
    }
  },
  methods: {
    // 菜单树选中
    menuListTreeCurrentChangeHandle(data, node) {
      this.dataForm.parentName = data.formulaName;
      this.dataForm.parentCode = data.formulaCode;
      this.dataForm.qualityId = data.qualityId;
      this.visible = false;
    },
    // 获上级数据列表
    getDataList(param) {
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      formulaList(param)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          let data = formulaTranslate(
            res.data.data,
            "formulaCode",
            "parentCode"
          );
          this.dataList = data;
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    // 获取实体类列表
    getEntityCls() {
      entityList({}).then((res) => {
        // console.log("res.data.data",res.data.data)
        this.entitys = [];
        if (res.data.data) {
          res.data.data.forEach((item) => {
            item["label"] = item.entityName + "-" + item.entityIdentify;
            this.entitys.push(item);
          });
        }
      });
    },
    async getQualtydata(param) {
    let res = await getQualty(param)
    this.quality = res.data.data.entityItems;
    },
    // 实体类改变
    changeEntity(item) {
      this.descData[0] = {
        k: item.entityName + " 的",
        v: "$" + item.entityIdentify + ".",
      };
      this.descData[1] = "";
      this.dataForm.qualityId = "";
      this.dataForm.remark = "";
      let param={
        id: item.entityId + ""
      }
      this.getQualtydata(param)

    },
    changequality(data) {
      let s =
        data.itemIdentify.substring(0, 1).toLocaleUpperCase() +
        data.itemIdentify.substring(1, data.itemIdentify.length);
      let v = "get" + s + "()";
      this.descData[1] = { k: data.itemName, v: v };
      this.showValue();
    },
    // 显示描述信息
    showValue() {
      this.dataForm.remark = "";
      this.descData.forEach((item) => {
        if (item.v && item.k) {
          this.dataForm.remark = this.dataForm.remark + item.v;
        }
      });
    },
    toList() {
      constant.clearTag(this);
      this.$router.push({ path: "/drools-baseConfig/formula/list" });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$store.dispatch("loading/CHANGE_LOADING", true);
          editFormula(this.dataForm).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.data.resultCode === 0) {
              this.$router.push({ path: "/drools-baseConfig/formula/list" });
            } else {
              this.$message.error(res.data.resultMsg);
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table__row .el-form-item {
  margin-bottom: 18px !important;
  margin-top: 18px !important;
}
.fillcontain{
  background-color: #fff;
}
</style>
